<template>
    <div class="flexbox flexcolumn demands_cout_box">
        <div class="tboxr_head">人员需求统计</div>
        <div class="demands_group checked_list">
            <el-radio-group v-model="countInfo.type" @change="getStatistics">
                <el-radio :label="item.id" v-for="item in groupOption" :key="item.id">
                    <div class="demands_item">{{item.nickname}}</div>
                </el-radio>
            </el-radio-group>
        </div>
        <div class="member_data flex">
            <template v-if="statData.length>0">
                <div class="demands_member" v-for="item in statData" :key="item.user_id">
                    <div class="dmb_head">{{item.user_name}}</div>
                    <div class="dmb_list flexbox flexcenter flexbetween">
                        <div class="dmb_item">
                            <div class="dmb_num">{{item.centre_role}}</div>
                            <div class="dmb_name">编导</div>
                        </div>
                        <div class="dmb_item">
                            <div class="dmb_num">{{item.executor_role}}</div>
                            <div class="dmb_name">带本剪辑</div>
                        </div>
                        <div class="dmb_item">
                            <div class="dmb_num">{{item.free_role}}</div>
                            <div class="dmb_name">自由剪辑</div>
                        </div>
                        <div class="dmb_item">
                            <div class="dmb_num">{{item.editor_role}}</div>
                            <div class="dmb_name">剪辑总和</div>
                        </div>
                    </div>
                </div>
            </template>
            <div class="flexbox flexcenter flexcolumn flexjust" style="height:100%" v-else>
                <img src="@/assets/img/null_icon.svg" alt="">
                <div class="font_13 color_03">暂无数据</div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: ["statData", "countInfo"],
    name: "",
    data() {
        return {
            group: 0,
            groupOption: [
                {
                    id: 0,
                    nickname: "全部",
                },
                {
                    id: 1,
                    nickname: "编导",
                },
                {
                    id: 2,
                    nickname: "剪辑",
                },
            ],
        };
    },

    created() {},

    methods: {
        getStatistics() {
            this.$emit("getStatistics");
        },
    },
};
</script>
<style scoped>
.demands_cout_box {
    height: 100%;
}
.tboxr_head {
    height: 60px;
    line-height: 60px;
    font-size: 16px;
    color: #17233d;
    padding: 0 12px;
}
.demands_group {
    padding: 0 6px;
}
.demands_item {
    height: 30px;
    line-height: 30px;
    background: rgba(165, 177, 209, 0.1);
    border-radius: 4px;
    width: 60px;
    font-size: 13px;
    color: #616c85;
    cursor: pointer;
    text-align: center;
    margin-right: 0;
}
.checked_list .el-radio .demands_item,
.demands_group .el-radio {
    margin-right: 0;
}
.demands_group .el-radio {
    margin: 0 6px;
}

.demands_item.active,
.checked_list .el-radio.is-checked .demands_item {
    background: rgba(22, 93, 255, 0.1);
    color: #4475ff;
}
.member_data {
    margin-top: 20px;
    padding: 0 12px;
    overflow-y: auto;
}
.member_data::-webkit-scrollbar {
    width: 0px;
    height: 0px;
}

.member_data::-webkit-scrollbar-thumb {
    background: #aab5c5;
    border-radius: 3.5px;
}

.member_data::-webkit-scrollbar-track-piece {
    background: rgba(165, 177, 209, 0.1);
}

.member_data::-webkit-scrollbar-corner {
    background: rgba(165, 177, 209, 0.1);
}
.demands_member {
    background: rgba(213, 160, 56, 0.05);
    border-radius: 4px;
    margin-bottom: 12px;
    padding: 12px 0;
}
.dmb_head {
    margin: 0 8px;
    font-size: 14px;
    color: #17233d;
}
.dmb_list {
    margin: 12px 8px 0;
}
.dmb_item {
    text-align: center;
}
.dmb_num {
    font-size: 14px;
    line-height: 20px;
    height: 20px;
    color: #17233d;
}
.dmb_name {
    font-size: 12px;
    color: #616c85;
    line-height: 17px;
    height: 17px;
    margin-top: 3px;
}
</style>

